<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="case10-demo1">
    {{message}}
    <div v-html="imgSrc"></div>
</div>
<script type="text/javascript">
    var case10Demo1=new Vue({
            el:"#case10-demo1",
            data:{
                message:"Hello World",
                imgSrc:`<img src="../../images/timg.jpg" height="852" width="720"/>`
            }
        })
    //至于有些方法的使用，只需答应来看一下就知道了
    console.log(case10Demo1.$root)//实例对象
    console.log(case10Demo1.$el)//根元素（真实的DOM元素）
    console.log("case10Demo1.$el.innerHTML===>\n"+case10Demo1.$el.innerHTML)//得到根元素（真实的DOM元素）中的内容
    console.log("case10Demo1.$nextTick===>\n"+case10Demo1.$nextTick)//用于在DOM渲染后执行的操作
    case10Demo1.$nextTick(()=>{
        console.log("case10Demo1.$el.innerHTML===>\n"+case10Demo1.$el.innerHTML)//通过case10Demo1.$el.innerHTML得到的数据有可能时更新之前的
    })//要获取最新的数据，最好在下一个事件环中获取
    console.log(case10Demo1.$data)//实例下的data对象
    /*console.log("case10Demo1.$options===>\n"+case10Demo1.$options)//实例下的挂载项
    console.log("case10Demo1.$props===>\n"+case10Demo1.$props)//组件之间通信的数据
    console.log("case10Demo1.$parent===>\n"+case10Demo1.$parent)//在组件中，指父元素
    console.log("case10Demo1.$children===>\n"+case10Demo1.$children)//在组件中，指子代元素
    console.log("case10Demo1.$attrs===>\n"+case10Demo1.$attrs)//用来获取父组件传递过来的所有属性
    console.log("case10Demo1.$listeners===>\n"+case10Demo1.$listeners)//用来获取父组件传递过来的所有方法
    console.log("case10Demo1.$slots===>\n"+case10Demo1.$slots)//组件中的插槽
    console.log("case10Demo1.$scopedSlots===>\n"+case10Demo1.$scopedSlots)//用来访问作用域插槽
    console.log("case10Demo1.$refs===>\n"+case10Demo1.$refs)//用来定位DOM元素（使用ref进行追踪）
    console.log("case10Demo1.$isServer===>\n"+case10Demo1.$isServer)//一般用于服务器渲染，用来区分代码是不是服务器上运行
    console.log("case10Demo1.$watch===>\n"+case10Demo1.$watch)//用来监听数据（在vue文件中使用后自动销毁）
    console.log("case10Demo1.$emit===>\n"+case10Demo1.$emit)//用来派发事件（常用于数据通信）
    console.log("case10Demo1.$on===>\n"+case10Demo1.$on)//用于监听事件的派发
    console.log("case10Demo1.$once===>\n"+case10Demo1.$once)//只监听事件一次（之后不监听）
    console.log("case10Demo1.$set===>\n"+case10Demo1.$set)//可以给data中动态地添加一个数据，（前提是只能给对象中添加数据）
    // 示例：vm.$set(vm.obj, "name", "Fan")     //obj是一个对象
    console.log("case10Demo1.$delete===>"+case10Demo1.$delete)//用于删除一个属性*/
</script>
</body>
</html>